import React from 'react';
import styles from './index.module.scss';
import {Layout} from 'antd';
import logo from '@/pages/dv/assets/logo.png';

import {ChartActions,ChartsToolBar, DvActions, HelperLink, SiderManageTool } from './toolbar';
import BoxContainer from  './BoxContainer';
import ChartPanelBox from './ChartPanelBox';
import {toJS} from "mobx";
import {observer} from "mobx-react";
import dv from '@/stores/dvEditor';

interface IProps extends Route.IProps{

}

interface IState {

}

@observer
export default class EditorBox extends React.PureComponent<IProps, IState>{

  constructor(props:IProps) {
    super(props);
    this.state = {

    }
  }

  componentDidMount(): void {
    dv.getDvOption();
  }


  render() {

    const {dvLoading} = toJS(dv);

    return <div className={styles.dv_editor_wrapper}>
      <Layout.Header className={styles.main_header}>
        <div className={styles.logo}>
          <img src={logo} alt="DV"/>
          <span>DV Editor</span>
        </div>
        <ChartActions />
        <ChartsToolBar/>

        <HelperLink/>

        <DvActions/>

      </Layout.Header>
      <div className={styles.main_content}>
        {/*左侧工具栏管理*/}
        <SiderManageTool

        />
        <Layout.Content className={styles.dv_container}>
          {/*大屏内容区域*/}
          <BoxContainer
            dvLoading={dvLoading}
          />

          {/*右侧编辑工具模态组件*/}
          <ChartPanelBox
            dvLoading={dvLoading}

          />
        </Layout.Content>
      </div>
    </div>
  }
}
